$(function () {
  var { form, layer } = layui;
  //定义分页全局变量-------------------------------------------------
  var pagesAll = {
    pagenum: 1,    //页码值
    pagesize: 2,  //每页显示多少条数据
    cate_id: '',   //文章分类id
    state: '已发布'
  }
  //调用文章列表函数
  getBookslist(pagesAll);
  //调用文章分类函数
  getCatList();
  // 给删除按钮绑定点击事件============================================================
  $('body').on('click', '#bbbb', function () {
    // console.log(6666)
    // 1. 获取要删除id
    var id = $(this).data('id')
    // console.log(id)
    // 获取删除按钮的个数
    var len = $('.btn-delete').length
    console.log(len)
    // 2. 给弹窗
    layer.confirm('确定要删除么？', { icon: 3, title: '删除' }, function (index) {
      // do something
      // 3. 删除
      $.ajax({
        url: '/my/article/delete/' + id,
        method: 'get',
        success: function (res) {
          // console.log(res, 111)
          layer.msg(res.message)
          if (res.status !== 0) return
          if (len === 1) {
            // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
            // 页码值最小必须是 1
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
          }
          // 成功 重新获取列表数据
          getBookslist(pagesAll)
        }
      })
      layer.close(index);
    });
  })
  //封装函数获取文章列表---------------------------------------------
  function getBookslist(data) {
    // 发送请求
    $.ajax({
      url: '/my/article/list',
      data: data,
      success: function (data) {
        console.log(data, 121121);
        // 1. 使用模板引擎渲染
        var tableStr = template('article-table-tpl', data); // {data: []}
        // console.log(tableStr)
        // 2. 放到页面中
        $('tbody').html(tableStr);
        // 调用初始化的initPage函数
        // 获取后台返回给我的总条数
        initPage(data.total);
      },
    });
  }


  //======================
  $('body').on('click', '#article-edit', function () {
    console.log(333333)
  })
  // 定义获取所有类别的函数-==-------------------------------------------------
  function getCatList() {
    $.ajax({
      url: '/my/article/cates',
      method: 'get',
      success: function (res) {
        // console.log(res, 22222)
        if (res.status !== 0) return layer.msg(res.message);
        // 成功处理逻辑
        var arr = [];
        for (var i = 0; i < res.data.length; i++) {
          var item = `<option value="${res.data[i].Id}">${res.data[i].name}</option>`;
          arr.push(item);
        }
        // 数组转字符串
        var resultStr = arr.join('');
        console.log(resultStr);
        $('.cate-select').html(resultStr);
        // 为什么没有被渲染出来？？？
        // 因为不是爱情
        form.render('select');
      },
    });
  }
  // 监听筛选按钮提交事件====================================================================
  $('.layui-form-list').on('submit', function (e) {
    e.preventDefault();
    // 获取下拉列表中对应的值
    var obj = form.val('formArticleList');
    // console.log(params)
    pagesAll.cate_id = obj.cate_id;
    pagesAll.state = obj.state;
    // 重新获取列表数据
    getBookslist(pagesAll);
  });
  var laypage = layui.laypage;
  //封装分页初始化函数==========================================================================
  function initPage(total) {
    laypage.render({
      elem: 'sub-page', // 注意，这里的mypage 是 ID，不用加 # 号
      count: total || 1, // 数据总数，从服务端得到
      curr: pagesAll.pagenum,
      limit: pagesAll.pagesize, // 每页显示的条数
      limits: [1, 2, 3, 10, 20], // 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
      layout: ['prev', 'page', 'next', 'limit'], // 自定义排版
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr);  // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数
        pagesAll.pagenum = obj.curr
        pagesAll.pagesize = obj.limit
        // 重新调用获取文章列表的数据并渲染
        // getArticleList(params);
        // 首次不执行
        // 1. 第一次渲染分页会触发jump方法
        // 2. 当你切换你了分页参数 他也会触发jump
        if (!first) {
          //do something
          // 重新调用获取文章列表的数据并渲染
          getBookslist(pagesAll);
        }
      }
    });



  }



})
template.defaults.imports.getTime = function (t) {
  var date = new Date(t);
  var year = date.getFullYear();  //获取当前年份
  var month = date.getMonth() + 1;  //获取当前月份（0~11）
  var day = date.getDate();     //获取当前时间
  var h = date.getHours();
  h = h < 10 ? '0' + h : h;    //获取当前小时（24小时）
  var m = date.getMinutes();
  m = m < 10 ? '0' + m : m;    //获取当前分钟
  var s = date.getSeconds();    //获取当前秒
  s = s < 10 ? '0' + s : s;

  return year + "-" + month + "-" + day + "  " + h + ":" + m + ":" + s;
}
